<template>
  <div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :with-header="false"
      size="72%"
    >
      <div class="box">
        <template v-for="(item,index) in ondatalist.types">
        <div class="topbox" :key="index" v-if="index==show">
          
          <div class="leftbox">
            <div class="dpname">{{ondatalist.dpName}}</div>
            <img :src="item.cShopImgSrc" alt="" />
          </div>
          <div class="rightbox">
            <div>{{ondatalist.title}}</div>
            <div class="end">￥{{item.price}}<span>(库存{{item.totalCount}})</span></div>
          </div>
        </div>
        </template>
        <div class="select">
          <p>型号</p>
          <ul>
            <li
              v-for="(item,index) in ondatalist.types" :key="index"
              :class="{ active: cindex == index }"
              @click="active(item,index)"
            >
              {{ item.ctype }}
            </li>
          </ul>
        </div>
        <div class="number">
          <div>购买数量</div>
          <div class="btn">
            <button @click="jian">-</button> {{ $store.state.number }}
            <button @click="jia">+</button>
          </div>
        </div>
        <div class="bot-btn">
          <mt-button size="normal" class="jion" @click="shounums"
            >加入购物车</mt-button
          >
          <mt-button size="normal" class="fast" @click="goshop"
            >立即购买</mt-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      drawer: false,
      direction: "btt",
      cindex: -1,
      index:0,
      show:0,
      onlists:[],
      onshopArr:[],
      ondatalist:{
        types:[{cShopImgSrc:""}]
      },
      obj:{},
      shoplist:[]
    };
  },
  computed:{
    
  },
  mounted() {
    this.ondf();
    this.$store.commit("changetypestatus");
    
  },
  methods: {
    dak() {
      this.drawer = true;
    },
    //选择商品数量 加减方法
    jian() {
      if (this.$store.state.number <= 1) {
        this.$store.state.number = 1;
      } else {
        this.$store.state.number -= 1;
      }
    },
    jia() {
      this.$store.state.number += 1;
    },
    //加入购物车
    shounums() {
      this.$store.state.flag = true;
      if(!this.$store.state.selectflag){
        this.$message({
          showClose: true,
          message: '请选择型号',
          type: 'warning'
        });
      }else{
        
        this.obj.num=this.$store.state.number;
        this.drawer = false;
        this.obj.checked=false;
        // this.$store.commit("shopcartcontent",this.obj)

        // let shoplist=[];
        let onshop=JSON.parse(localStorage.getItem("onshop"))
        if(onshop){
          onshop.push(this.obj)
        }else{
          onshop=[];
          onshop.push(this.obj)
        }

        localStorage.setItem('onshop',JSON.stringify(onshop))
        //  this.$store.commit("changetypestatus");
      }
      
    },
    //立即购买
    goshop() {
      if(!this.$store.state.selectflag){
         this.$message({
          showClose: true,
          message: '请选择型号',
          type: 'warning'
        });
      }else{
        this.obj.num=this.$store.state.number
        this.drawer = false;
        this.$store.commit("shopcartcontent",this.obj)
        this.$router.push("/order");
      }
    },
    //动态绑定选择商品型号的样式
    active(item,index) {
      this.$store.state.selectflag=true;
      this.cindex = index;
      this.show=index
      this.obj=item;
      this.obj.dpName=this.ondatalist.dpName
      this.obj.title=this.ondatalist.title
    },
    ondf(){
           let list=this.$route.query;
           this.onshopArr=list,
           this.ondatalist=this.onshopArr.curtShopDetail.selectShopType,
           console.log(this.ondatalist);
      }
  },
};
</script>

<style lang="less" scoped>
.active {
  border: 1px solid skyblue;
}
.box {
  padding: 40px;
  height: 220px;
  width: 100%;
  position: relative;
  .topbox {
    display: flex;
    height: 150px;
    width: 100%;
    position: absolute;
    top: 30px;
    .leftbox {
      width: 35%;
      height: 200px;
      .dpname{
        font-size: 12px;
        margin-bottom: 17px;
      }
      img {
        width: 150px;
      }
    }
    .rightbox {
      margin-left: 40px;
      margin-top: 48px;
      font-size: 28px;
      text-align: left;
      position: relative;
      div {
        width: 80%;
        line-height: 30px;
      }
      .end {
        position: absolute;
        bottom: -50px;
        color: #fd2c49;
        font-size: 35px;
        span {
          font-size: 28px;
          color: #acacac;
        }
      }
    }
  }
  .select {
    margin-top: 250px;
    width: 100%;
    p {
      text-align: left;
      color: #acacac;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        font-size: 26px;
        padding: 5px 7px;
        background-color: #f6f6f6;
        margin-right: 15px;
        margin-top: 15px;
        box-sizing: border-box;
      }
    }
  }
  .number {
    width: 100%;
    height: 50px;
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    margin-top: 150px;
    .btn {
      color: red;
      button {
        color: #000;
        width: 50px;
        height: 50px;
        margin: 0 10px;
      }
    }
  }
  .bot-btn {
    width: 100%;
    height: 100px;
    margin-top: 200px;
    display: flex;
    justify-content: space-between;
    button {
      width: 48.5%;
      height: 65px;
      line-height: 60px;
      color: #fff;
      font-size: 35px;
    }
    .jion {
      background-color: #f7bc3e;
    }
    .fast {
      background-color: #fc2c49;
    }
  }
}
</style>